<template>
	<div>
		<div class="detail-ubox">
			<p class="usp1">
				{{detailUser}}
			</p>
			<p class="usp2">
				作者
			</p>
			<span class="iconfont members">
				&#xe73a;
			</span>
			<p class="usp-time">
				2020-09-25 18:30
			</p>
		</div>
		<div class="detail-content">
			<img 
				v-show='detailConImg?true:false' 
				class="content-img" 
				:src="detailConImg" 
			/>
			<p 
				class="content-p" 
				v-html='detailContent'
			>
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		name:'detail-content',
		props: {
			detailUser: String,
			detailConImg: String,
			detailContent: String
		},
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.detail-ubox
		padding:50px 30px 0px 30px
		.usp1
			font-size:32px
			color:#4b7bab
			display:inline-block
		.usp2
			font-size:24px
			background:$public_thems_color
			color:#fff
			border-radius:6px
			padding:6px 8px
			margin-top:-4px
			margin-left:10px
			display:inline-block
		.members
			font-size:34px
			color:#F18D51
			margin-left:6px
		.usp-time
			color:#aaa
			margin:14px 0 0 0
	.detail-content
		padding:10px 30px 40px 30px
		background:#fff
		.content-img
			width:100%
			margin-top:20px
		.content-p
			font-size:36px
			line-height:70px
			letter-spacing:1px
			color:#222
			margin-top:20px
</style>
